// 1. 导入createRouter,createWebHashHistory,RouteRecordRaw 方法
import { queryAdminInfoApi } from '@/request/api'
import { App } from 'vue'
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import store from '@/store'
import { SET_USER_MENU } from '@/store/contant'
// 2. 导入组件 / 懒加载
// 3. 配置路由
// login / index 这两个页面是所有用户都可以访问的，所以我们在静态路由里面已经写死了
const routes: RouteRecordRaw[] = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/views/login/Login.vue')
  },
  {
    path: '/',
    name: 'homepage',
    component: () => import('@/views/home/Home.vue'),
    redirect: '/index',
    children: [
      {
        path: 'index',
        name: 'index',
        component: () => import('../views/index/Index.vue')
      }
    ]
  },
  // 我们希望的动态的路由结构
  // {
  //   path: '/ums',
  //   component: () => { },
  //   children: [
  //     {
  //       path: '/ums/admin',
  //       component: () => { }
  //     }
  //   ]
  // }
]

// 4. 调用 createRouter 创建路由对象
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

// 动态添加路由
// 获取到权限数据之后，再动态添加路由，所以准备一个函数，当需要的时候调用
const dynamicRouter = () => {

  // 根据 获取的 权限数据进行操作
  const menus = store.getters['computedMenus'] as IMenuModel[];
  // 遍历权限数组，动态生成路由配置
  menus.forEach(menu => {
    // 生成一级路由
    const newRoute: RouteRecordRaw = {
      path: `/${menu.name}`, // ums
      name: menu.name,
      // 所有的一级路由对应的组件，其实都需要 头 / 左侧 / 右侧的 router-view，全都是一样的，而且和home组件是一样的，没必要再写多个，只要有一个就行
      component: () => import('../views/home/Home.vue'),
      children: [],
      // 路由的元信息对象，这里面可以存任何你想要存的数据
      meta: {
        // 把路由对应的中文存在这
        title: menu.title
      }
    }
    // 遍历对应的二级菜单，生成二级路由
    menu.children?.forEach(sub => {
      newRoute.children?.push({
        path: `/${menu.name}/${sub.name}`,
        name: sub.name,
        // 我们为了可以动态生成的时候和前端项目的路径匹配，约定好，以父菜单的name作为view里面的文件夹的名字，子菜单的name作为组件的名字
        // component: () => import('../views/父菜单的name/子菜单的name.vue')
        component: () => import(`../views/${menu.name}/${sub.name}.vue`),
        meta: {
          title: sub.title
        }
      })
    })
    // 根据menu生成 路由
    router.addRoute(newRoute)
  })
}

// 在路由导航守卫里面实现权限控制
router.beforeEach((to, from, next) => {
  // console.log(1);
  // 想要解决的是 刷新 veux里面的权限数据丢失的问题
  // 登录了，并且刷新了
  const token = localStorage.getItem('token');
  // token如果存在代表已经登录， 当store里面没有 menus的 数据，证明需要重新请求
  if (token && store.state.userMenus.length === 0) {
    // 把权限数据再次请求回来
    queryAdminInfoApi().then(res => {
      if (res.code === 200) {
        // 数据同步到vuex
        store.commit(SET_USER_MENU, res.data.menus)
        store.commit('setUserName', res.data.username)
        // 获取到权限数据后，动态生成对应的路由
        dynamicRouter()
        // next有一个 特性，没有传递参数就会直接到达 to
        // 如果传递了参数，跳转到传递的参数对应的页面 ,会再次进入 beforeEach
        next(to)
      }
    })
  } else if (!token && to.path !== '/login') {
    // 如果没有登录，除了登录页，我们都不让用户直接访问
    next('/login')
  } else if (token && store.state.userMenus.length !== 0 && to.path === '/home') {
    // 处理登录后，生成动态路由
    dynamicRouter()
    next('/index')
  } else if (token && store.state.userMenus.length !== 0 && to.path === '/login') {
    // 如果在已经登录的情况下，，不让用户访问login ,回到之前的页面
    next(from)
  } else {
    next()
  }
})

// 5. 导出一个函数，让main.ts调用，注册路由
export const regRouter = (app: App<Element>) => {
  app.use(router)
}
